<template>
  <div id="main">
    <Aside/>
    <div id="content">
      <div class="panel">
        <div class="header">
          <a :href="'/?tab='+item.type" v-for="item in nav.menu" class="topic-tab" :class="{'current-tab':nav.currentType == item.type}">{{item.name}}</a>
        </div>
        <div class="inner no-padding">
          <div id="topic_list">
            <div class="cell" v-for="item in topics">
              <NuxtLink class="user_avatar pull-left" :to="'/user/'+item.author.loginname">
                <img :src="item.author.avatar_url" :title="item.author.loginname">
              </NuxtLink>
              <span class="reply_count pull-left">
                <span class="count_of_replies" title="回复数">{{item.reply_count}}</span>
                <span class="count_seperator">/</span>
                <span class="count_of_visits" title="点击数">{{item.visit_count}}</span>
              </span>
              <span class="last_time pull-right">
                <span class="last_active_time">{{item.last_reply_at.substring(0,10)}}</span>
              </span>
              <div class="topic_title_wrapper">
                <span  v-if="item.top" class="put_top">置顶</span>
                <span  v-else-if="item.good" class="put_good">精华</span>
                <span v-else class="topiclist-tab">{{formatType[item.tab]}}</span>
                <NuxtLink class="topic_title" :to="'/topic/'+item.id" :title="item.title">{{item.title}}</NuxtLink>
              </div>
            </div>
          </div>
          <div class="pagination">
            <ul>
              <li v-for="k in page.data" :class="{'disabled active':page.currentPage == k,'disabled':k == '...'}"><a :href="'/?tab='+nav.currentType+'&page='+k">{{k}}</a></li>
            </ul>
          </div>
        </div>

      </div>
    </div>

  </div>
</template>

<script>
  import Aside from './../components/Aside/Aside'
  import {topics} from './../assets/js/api'
  export default {
    components:{
      Aside
    },
    key(route){
      return route.fullPath
    },
    head(){
      return {
        title:'CNode：Node.js专业中文社区',
        meta:[
          { hid: 'description', name: 'description', content: 'CNode：Node.js专业中文社区' }
        ]
      }
    },
    data(){
      return {
        nav:{
          menu:[
            {type:'good',name:'精华'},
            {type:'share',name:'分享'},
            {type:'ask',name:'问答'},
            {type:'job',name:'招聘'}
          ],
          currentType:'good'
        },
        formatType:{
          good:'精华',
          share:'分享',
          ask:'问答',
          job:'招聘'
        },
        page:{
          data:[],
          currentPage:1,//当前页码
        }

      }
    },
    //在服务端请求的数据
    async asyncData({$axios,query}){
      console.log(1)
      let {tab,page} = query;
      let data = await topics({axios:$axios,tab:tab?tab:'good',page: page?page:1});
      return {
        topics:data
      }
    },
    watch:{
      // '$route'(val){
      //   let {tab,page} = val.query;
      //   topics({axios:this.$axios,tab:tab?tab:'good',page: page?page:1}).then((data)=>{
      //     this.topics = data;
      //   });
      //   this.loadPage();
      // }
    },
    methods:{
      //根据当前页面分配全部页码
      loadPage(){
        let currentPage = this.$route.query.page?this.$route.query.page:this.currentPage;
        this.page.currentPage = Number(currentPage);
        if(currentPage>3){
          var page = [this.page.currentPage-2,this.page.currentPage-1,this.page.currentPage,this.page.currentPage+1,this.page.currentPage+2]
        }else {
          var page = [1,2,3,4,5]
        }
        this.page.data = page;
      },
      //图片懒加载
      delayLoadImg(){
        let dom = document.querySelectorAll('[data-src]');
        for(let i = 0;i<dom.length;i++){
          setTimeout(()=>{
            let img = new Image()
            img.src = dom[i].getAttribute('data-src');
            dom.src = img.src;
          })

        }
      }
    },
    beforeCreate(){

    },
    created() {
      this.nav.currentType = this.$route.query.tab?this.$route.query.tab:'good';
      this.loadPage();
      console.log('created')
    },
    mounted() {
      this.$nextTick(() => {
        this.$nuxt.$loading.start()
        setTimeout(() => this.$nuxt.$loading.finish(), 500)
      })
    }
  }
</script>

<style>

</style>
